
<template>
    <div class="pane">
        <el-row :span="24" class="paneRow">
            <div>
                <span class="title">客单价：</span>
                <span class="_999999"
                    >¥ {{ dataReportInfoYear.totalAmount / 100 }}</span
                >
            </div>
            <div class="tip">
                口径：付款金额￥12,133,412,412 / 付费用户数22,331,233人
            </div>
            <div>
                付款金额<span class="_999999">￥12,133,412,412</span>
                在对比周期内
                <span class="_619add">上升20%</span>查看 付费用户数
                <span class="_999999">23,123,123</span>
                对比上一周期<span class="_61dbb6">下降30%</span>查看
            </div>
            <div>
                因此，对比周期内，付费转化率总体 下降 13%，是由
                付款金额上升，付费用户下降导致的。
            </div>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'analyzepane',
    props: {
        dataReportInfoYear: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    data() {
        return {}
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        changeDate() {},
    },
}
</script>
<style lang="scss" scoped>
.pane {
    align-items: center;
    font-size: 14px;
    padding: 10px;
    ._619add {
        color: #619add;
    }
    ._61dbb6 {
        color: #61dbb6;
    }
    ._999999 {
        color: #999;
    }
    .paneRow {
        padding: 20px;
        width: 100%;
        box-shadow: 0px 2px 11px 0px rgba(228, 233, 238, 1);
        div {
            height: 32px;
            line-height: 32px;
        }
    }
    .title {
        font-size: 24px;
    }
    .tip {
        color: #999;
    }
}
</style>